<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>博客详情</title>
		<link rel="stylesheet" href="../static/js/Semantic-UI/semantic.min.css">
		<!-- 排版插件集成 -->
		<link rel="stylesheet" href="../static/plugins/typo/typo.css" />
		<link rel="stylesheet" href="../static/css/my_themy.css">
	</head>
	<body>
		<!-- 导航 -->
		<nav class="ui inverted attached segment  m-padded-tb-mini m-shadow-small">
			<div class="ui container">
				<div class="ui inverted secondary stackable menu">
					<h2 class="ui teal header item">MiniBlog</h2>
					<a href="#" class="m-item item m-mobile-hide"><i class="mini home icon"></i>首页</a>
					<a href="#" class="m-item item m-mobile-hide"><i class="mini idea icon"></i>分类</a>
					<a href="#" class="m-item item m-mobile-hide"><i class="mini tags icon"></i>标签</a>
					<a href="#" class="m-item item m-mobile-hide"><i class="mini clone icon"></i>归档</a>
					<a href="#" class="m-item item m-mobile-hide"><i class="mini info icon"></i>关于我</a>
					
					<div class="right m-item item m-mobile-hide">
						<div class="ui icon input">
							<input type="text" placeholder="Search..."/>
							<i class="search link icon"></i>
						</div>
					</div>
				</div>				
			</div>	
			<a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
				<i class="sidebar icon"></i>
			</a>
		</nav>
		
		
		<!-- 中间内容 -->
		<div class="m-container-small m-padded-tb-big">
			<div class="ui container">
				<div class="ui top attached segment">
					<!-- 头部区域 -->
					<div class="ui horizontal link list">
						<div class="item">
							<img src="https://picsum.photos/seed/picsum/100/100" alt="" class="ui avatar image" />
							<div class="content"><a href="#" class="header">王先生</a></div>
						</div>
						<div class="item">
							<i class="calendar icon"></i>20250401
						</div>
						<div class="item">
							<i class="eye icon"></i>234
						</div>
					</div>
					
				</div>
				
				<div class="ui  attached segment">
					<!-- 图片区域 -->
					<img src="https://picsum.photos/id/235/200/100" alt="" class="ui fluid rounded image" />
				</div>
				
				<div class="ui  attached padded segment">
					<!-- 主要内容区域 -->
					<div class="ui right aligned basic segment">
						<div class="ui orange basic label">原创</div>
					</div>
					
					<h2 class="ui center aligned header">文章简介</h2>
					
					<!-- 文章内容 typo typo-selection排版插件样式-->
					<div id="content" class="typo typo-selection m-padded-lr-reponsive m-padded-tb-large">
							
						<p>文章，1984年6月26日出生于陕西省西安市，中国内地男演员及导演 [2-3]。</p>
						<h2>1</h2>
						<p>文章上中学时，就被挑选出演一部青春片《青春正点》，成为当时的童星 [1]。</p>
						<h2>2</h2>
						<p>2002年成功地考入中央戏剧学院表演系。就读期间，文章在电视剧《与青春有关的日子》中，饰演卓越，开始在影视圈崭露头角。</p>
						<h2>3</h2>
						<p>毕业后，凭借在电视剧《奋斗》中的表演被观众熟知 [1] [12]，并获得最受媒体关注新人男演员奖 [14-15]。</p>
						<h2>4</h2>
						<p>随后的2010年，文章主演的抗战剧《雪豹》获得同时段电视剧收视率冠军 [101]。</p>
						<h2>5</h2>
						<p>2011年，主演的爱情电影《失恋33天》以900万的成本取得3.5亿元票房 [103-104]，并引发关注 [102]。</p>
						<h2>6</h2>
						<p>2012年，文章自导自演的电视剧《小爸爸》正式播出，该剧也使文章成功完成演员至导演的转型 [27] [31]。</p>
						<h2>7</h2>
						<p>2014年3月，文章在微博承认出轨，其事业受到影响 [57] [62]。</p>
						<h2>8</h2>
						<p>同年，文章出演的电影《我在路上最爱你》上映，但因受到“出轨事件”的影响，导致票房惨淡 [36]。</p>
						<h2>9</h2>
						<p>2015年，文章主演的电视剧《少帅》正式上映，在剧中文章饰演历史人物“张学良”一角 [43]。
						2018年至2021年期间，文章参演的电影《雪豹之虎啸军魂》《测谎人》等影视作品陆续上映 [52-53]。
						2022年之后，文章工作重心向话剧转移，陆续出演《如梦之梦》《钟馗嫁妹》等话剧作品 [54] [56]。
						2024年4月4日，文章参演的喜剧电影《大“反”派》在全国上映 [72]。
						2012年，文章凭借《失恋33天》获得第31届大众电影百花奖最佳男主角 [5] [97]，并于2015年凭借《少帅》获得2016年中国电视剧品质盛典年度品质表演剧星 [41-42]。
						2017年，文章还获得第31届中国电影金鸡奖最佳导演处女作奖 [4]
						</p>	
					</div>
					<!-- 标签 -->
					<div class="m-padded-lr-reponsive">
						<div class="ui basic teal left pointing label">方法论</div>
					</div>
					
					<!-- 赞赏 -->
					<div class="ui center aligned basic segment">
						<button id="payButton" class="ui orange basic circular button">赞赏</button>
					</div>
					
					<div class="ui payQr flowing popup transition hidden">
						<div class="ui orange basic label">
							<div class="ui images" style="font-size: inherit !important;">
								<div class="image">
									<img src="static/images/wechat.png" alt="" class="ui rounded bordered image" style="width: 120px;" />
									<div>微信</div>
								</div>
								<div class="image">
									<img src="static/images/wechat.png" alt="" class="ui rounded bordered image" style="width: 120px;"  />
									<div>支付宝</div>
								</div>
							</div>
						</div>
					</div>
					
				</div>
				
				<div class="ui attached positive message">
					<!-- 博客信息 -->
					<div class="ui middle aligned grid">
						<div class="eleven wide column">
							<ui class="list">
								<li>作者:小王(联系作者)</li>
								<li>发表时间:2017-10-0209:08</li>
								<li>版权声明:自由转载·非商用-非衍生-保持署名(创意共享3.0许可证)。</li>
								<li>公众号转载:请在文末添加作者公众号二维码</li>
							</ui>
						</div>
						<div class="five wide column">
							<img src="../static/images/wechat.png" alt="" class="ui right floated rounded border image" style="width: 110px;" />
						</div>
					</div>
				</div>
				
				<div class="ui bottom attached segment">
					<!-- 留言区域列表 -->
					<div class="ui teal segment">
						<div class="ui comments">
						  <h3 class="ui dividing header">评论</h3>
						  <div class="comment">
						    <a class="avatar">
						      <img src="https://picsum.photos/seed/picsum/800/450">
						    </a>
						    <div class="content">
						      <a class="author">Matt</a>
						      <div class="metadata">
						        <span class="date">今天下午 5:42</span>
						      </div>
						      <div class="text">太有艺术感了！</div>
						      <div class="actions">
						        <a class="reply">回复</a>
						      </div>
						    </div>
						  </div>
						  <div class="comment">
						    <a class="avatar">
						      <img src="https://picsum.photos/seed/picsum/800/450">
						    </a>
						    <div class="content">
						      <a class="author">Elliot Fu</a>
						      <div class="metadata">
						        <span class="date">昨天凌晨 12:30</span>
						      </div>
						      <div class="text">
						        <p>这对我来说非常有用。谢谢！</p>
						      </div>
						      <div class="actions">
						        <a class="reply">回复</a>
						      </div>
						    </div>
						    <div class="comments">
						      <div class="comment">
						        <a class="avatar">
						          <img src="https://picsum.photos/seed/picsum/800/450">
						        </a>
						        <div class="content">
						          <a class="author">Jenny Hess</a>
						          <div class="metadata">
						            <span class="date">刚刚</span>
						          </div>
						          <div class="text">Elliot，你总是那么正确：）</div>
						          <div class="actions">
						            <a class="reply">回复</a>
						          </div>
						        </div>
						      </div>
						    </div>
						  </div>
						  <div class="comment">
						    <a class="avatar">
						      <img src="https://picsum.photos/seed/picsum/800/450">
						    </a>
						    <div class="content">
						      <a class="author">Joe Henderson</a>
						      <div class="metadata">
						        <span class="date">5 天前</span>
						      </div>
						      <div class="text">老兄，这太棒了。非常感谢</div>
						      <div class="actions">
						        <a class="reply">回复</a>
						      </div>
						    </div>
						  </div>						  
						</div>
					</div>
					
					<!-- 留言提交区 -->
					<div class="ui form">
						<div class="field">
							<textarea name="content" placeholder="请输入评论信息"></textarea>
						</div>
						<div class="fields">
							<div class="field m-mobile-wide m-margin-bottom-small">
								<div class="ui left icon input">
									<i class="user icon"></i>
									<input type="text" name="nickname" placeholder="姓名"/>
								</div>
							</div>
							<div class="field m-mobile-wide m-margin-bottom-small">
								<div class="ui left icon input">
									<i class="mail icon"></i>
									<input type="text" name="email" placeholder="邮箱"/>
								</div>
							</div>
							
							<div class="field m-mobile-wide m-margin-bottom-small">
								<button class="ui teal button m-mobile-wide"><i class="edit icon"></i>发布</button>
							</div>
							
						</div>
					</div>
				</div>
				
			</div>
		</div>
		
		<!-- 底部footer -->
		<footer class="ui inverted vertical segment m-padded-tb-massive">
			<div class="ui center aligned container">
				<div class="ui inverted divided stackable grid">
					<div class="three wide column">
						<div class="ui inverted link list">
							<div class="item">
								<img src="../static/images/wechat.png"  class="ui rounded image" alt="" style="width: 110px;"/>	
							</div>
						</div>
					</div>
					<div class="three wide column">
						<h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
						<div class="ui inverted link list">
							<a href="#" class="item">用户故事（User Story）</a>
							<a href="#" class="item">关于刻意练习的清单</a>
							<a href="#" class="item">失败要趁早</a>
						</div>
					</div>
					<div class="three wide column">
						<h4 class="ui inverted header m-text-thin m-text-spaced">联系我</h4>
						<div class="ui inverted link list">
							<a href="#" class="item">Email: 18*****11@qq.com</a>
							<a href="#" class="item">QQ: 183*****11</a>
						</div>
					</div>
					<div class="seven wide column">
						<h4 class="ui inverted header m-text-thin m-text-spaced">Mirs Wang</h4>
						<p  class="m-text-thin m-text-spaced m-opacity-mini">
							这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...
						</p>
					</div>
				</div>
				
				<div class="ui inverted section divider"></div>
				<p class="m-text-thin m-text-spaced m-opacity-tiny">
					Copyright © 2024- 2025 W Designed by Wang
				</p>
			</div>
		</footer>
				
	<script src="../static/js/Jquery/jquery-3.2.0.min.js"></script>	
	<script src="../static/js/Semantic-UI/semantic.min.js"></script>
	
	<script>
		$('.menu.toggle').click(function() {
			$('.m-item').toggleClass('m-mobile-hide');
		});
		
		$('#payButton').popup({
			popup : $('.payQr.popup'),
			on : 'click',
			position: 'bottom center'
		});
	</script>
	</body>
</html>